<template>
  <div v-if="item" class="resume-card" @click="handleClick">
    <!-- 聊天简历卡片 -->
    <view v-if="type == 'chat'" class="resume-top resume-chat">
      <view class="resume-top_left">
        <Avatar
          :src="item[props.pic].length ? item[props.pic] : defaultAvatar"
          :sex-icon="item[props.sex] == '女' ? womanImg : manImg"
          img-mode="aspectFill"
        />
        <view class="chat-right">
          <view class="name"
            ><text>{{ item[props.iname] }}</text></view
          >
          <view class="info">
            <text v-if="item[props.age]">{{ item[props.age] }}岁</text>
            <text v-if="item[props.age] && item[props.gznum]" class="divide"
              >|</text
            >
            <text>{{ item[props.gznum] }}年</text>
            <text v-if="item[props.gznum] && item[props.edus]" class="divide"
              >|</text
            >
            <text>{{ item[props.edus] || "" }}</text>
            <!-- <text v-if="item[props.yuex]">
              <text class="divide">|</text>{{item.yuex}}
            </text> -->
          </view>
        </view>
      </view>
      <view class="resume-top_right">
        <text class="status">{{ statusText }}</text>
      </view>
    </view>
    <!-- 简历卡片 -->
    <view v-else class="resume-top">
      <view class="resume-top_left">
        <view class="name"
          ><text>{{ item[props.iname] }}</text
          ><text v-if="item[props.gj] && item[props.gj] != 0" class="tag"
            >高</text
          ></view
        >
        <view class="info">
          <text v-if="item[props.age]">{{ item[props.age] }}岁</text>
          <text v-if="item[props.age]" class="divide">|</text>
          <text>{{ item[props.gznum] || "0" }}年</text
          ><text><text class="divide">|</text> {{ item[props.edus] }}</text
          ><text
            ><text class="divide">|</text>{{ item[props.yuex] }}</text
          ></view
        >
      </view>
      <view class="resume-top_right">
        <Avatar
          :src="item[props.pic].length ? item[props.pic] : defaultAvatar"
          :sex-icon="item[props.sex] == '女' ? womanImg : manImg"
        />
      </view>
    </view>
    <view class="resume-middle">
      <view class="exp">
        <text class="icon icon-exp"></text
        ><text>{{
          item[props.work_des].length ? item[props.work_des] : "暂无工作经历"
        }}</text>
      </view>
      <view class="edu">
        <text class="icon icon-edu"></text
        ><text>{{
          item[props.edu_des].length ? item[props.edu_des] : "暂无教育经历"
        }}</text>
      </view>
    </view>
    <view v-if="type != 'chat'" class="text-overflow-2 resume-bottom">
      <text>
        {{ item[props.grzz] || "" }}
      </text>
    </view>
    <slot></slot>
  </div>
</template>

<script>
import Avatar from "@/components/Avatar";
export default {
  components: {
    Avatar,
  },
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
    type: String,
    props: {
      type: Object,
      default() {
        return {
          iname: "iname",
          pic: "pic",
          sex: "sex",
          age: "age",
          gznum: "gznum",
          edus: "edus",
          yuex: "yuex",
          work_des: "work_des",
          edu_des: "edu_des",
          grzz: "grzz",
          gj: "gj",
        };
      },
    },
    statusText: String,
  },
  data() {
    return {
      manImg: this.$imgBase + "resume/man.png",
      womanImg: this.$imgBase + "resume/woman.png",
      defaultAvatar:
            this.$imgBase + "common/avatar_default.png",
    };
  },
  methods: {
    handleClick() {
      this.$emit("click", this.item);
    },
  },
};
</script>

<style lang="scss" scoped>
.resume-card {
  margin: 17rpx 32rpx;
  padding: $uni-spacing-col-lg $uni-spacing-col-big;
  border-radius: $uni-border-radius-lg;
  box-shadow: 0 4rpx 10rpx 6rpx #eee;
  background-color: $uni-bg-color;

  .resume-top {
    display: flex;
    justify-content: space-between;
    .name {
      margin-bottom: 12rpx;
      font-size: 34rpx;
      font-weight: bold;
      color: #040223;
      max-width: 70%;
    }
    .tag {
      margin-left: 8rpx;
      padding: 0 4rpx;
      font-size: 20rpx;
      background-color: $u-type-primary;
      color: #fff;
      border-radius: 5rpx;
      font-weight: 400;
    }
    .info {
      margin-bottom: $uni-spacing-col-lg;
      font-size: $uni-font-size-sm;
      color: $uni-text-color-999;
    }
    .divide {
      margin: 0 12rpx;
    }
  }
  .resume-chat {
    .resume-top_left {
      flex: 1;
      display: flex;
      width: 0;
      .chat-right {
        margin-left: 16rpx;
      }
    }

    .status {
      font-size: $uni-font-size-sm;
      color: $uni-text-color-999;
    }
  }
  .resume-middle {
    margin-bottom: 20rpx;
    .exp,
    .edu {
      margin-bottom: 12rpx;
      font-size: 28rpx;
      color: #040223;
      .icon {
        width: 28rpx;
        height: 28rpx;
        margin-top: -6rpx;
        margin-right: 8rpx;
      }
    }
    .icon-exp {
      background-image: url($img-base+"resume/exp.png");
    }
    .icon-edu {
      background-image: url($img-base+"resume/edu.png");
    }
  }
  .resume-bottom {
    font-size: $uni-font-size-base;
    line-height: 1.5;
    color: $uni-text-color-999;
  }
}
</style>
